<template>
  <Card id="rateTable">
    <div>
      <h1 style="text-align: center;margin-bottom: 15px;">税率设置</h1>
    </div>
    <vxe-toolbar>
      <template v-slot:buttons>
        <vxe-button icon="fa fa-plus" status="primary" @click="insertEvent()">新增</vxe-button>
        <vxe-button icon="fa fa-save" status="success" @click="saveEvent">保存</vxe-button>
        <vxe-button @click="refreshEvent">刷新</vxe-button>
        <vxe-button status="danger" @click="$refs.xTable.removeCheckboxRow()">删除选中</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      ref="xTable"
      :data="tableData"
      :edit-config="{trigger: 'click', mode: 'row', icon: 'fa fa-pencil'}"
      :loading="loading"
      border
      class="my_table_insert"
      highlight-cell
      keep-source
      max-height="600"
      resizable
      show-overflow
      size="mini">
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column
        :edit-render="{name: '$input', props: {type: 'number'}}"
        field="rate"
        title="税率（%）"></vxe-table-column>
      <vxe-table-column
        :edit-render="{name: '$input', props: {type: 'month'}}"
        field="start"
        title="开始时间"></vxe-table-column>
      <vxe-table-column
        :edit-render="{name: '$input', props: {type: 'month'}}"
        field="end"
        title="结束时间"></vxe-table-column>
    </vxe-table>
  </Card>
</template>
<script>
import {rateList, updateRate} from '../../api/rate'

export default {
  data() {
    return {
      tableData: [],
      sexList: [],
      loading: false,
    }
  },
  created() {
    this.rateList()
  },
  methods: {
    rateList() {
      this.loading = true
      rateList().then(res => {
        this.loading = false
        this.tableData = res.data
      })
    },
    async findSexList() {
      this.sexList = []
    },
    async insertEvent(row) {
      const record = {
        start: '',
        end: '',
        rate: '',
      }
      const {row: newRow} = await this.$refs.xTable.insertAt(record, row)
      await this.$refs.xTable.setActiveCell(newRow, 'rate')
    },
    saveEvent() {
      const {insertRecords, removeRecords, updateRecords} = this.$refs.xTable.getRecordset()
      this.loading = true
      updateRate({
        insert: insertRecords,
        delete: removeRecords,
        update: updateRecords
      }).then(res => {
        if (res.data) {
          this.rateList()
        }
      })
    },
    refreshEvent() {
      this.rateList()
    },
  }
}
</script>
<style>
#rateTable .vxe-table,
#rateTable .vxe-toolbar {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vertical-center-modal .ivu-modal {
  top: 0;
}
</style>
